import React, { Component } from 'react';
import { connect } from 'dva';
import { router } from 'umi/router';
import { Icon, Form,Input,Button } from 'antd';
import styles from './index.less';

const Item = Form.Item;

@Form.create()
@connect(state=>({
  login: state.login
}))
class LoginPage extends Component {


  /**
   * 登陆
   */
  submit = e=> {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err,values)=> {
      if(!err) {
        this.props.dispatch({
          type:"login/login",
          payload: {
            ...values
          }
        })
      }
    })
  }

  render() {
    const {
      form: { getFieldDecorator },
      login: { loading}
    } = this.props;

        
    const formItemLayout = {
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
      },
    };

    return (
        <div className={styles.form}>
          <Form onSubmit={this.submit}>
            <Item {...formItemLayout} >
              {getFieldDecorator('username', { rules: [{ required: true, message: '不能为空' }] })(
                <Input addonBefore={<Icon type="user" />} placeholder="请输入用户名" size="large" />
              )}
            </Item>
            <Item {...formItemLayout}>
              {getFieldDecorator('psd', { rules: [{ required: true, message: '不能为空' }] })(
                <Input type="password" addonBefore={<Icon type="lock"/>} placeholder="请输入密码" size="large" />
              )}
            </Item>
            <Button loading={loading} htmlType="submit" type="primary" size="large" style={{width:"100%"}}>登陆</Button>
          </Form>
        </div>
    );
  }
}

export default LoginPage;
